<template>
  <div class="news">
    <div class="banner">
      <img :src="ban1" alt="">
    </div>
    <div class="big-box">
      <div class="left-nav">
        <div class="list" :class="item.id==firstid ? 'list-act':''" v-for="item in leftnav" @click="gettxt(item.id)">{{item.name}}</div>
      </div>
      <div class="right-box">
        <div class="edit-box">
          <p class="p-head">{{nr.title}}</p>
          <div class="cont-box" v-html="nr.content">
           
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import ban1 from '@/assets/image/ban1.jpg';
import cp1 from '@/assets/image/cp1.jpg';
export default {
  name: 'App',
  data(){
    return{
      ban1,cp1,
      leftnav:[],
      firstid:242,
      nr:[]
    }
  },
  methods:{
    gettxt:function(i){
      this.firstid = i;
        this.$http.get("/index.php/index/service/getInfo?ids="+i)
      .then(res => {
        this.nr = res.data
        console.log(res.data)
      })
      .catch(error => {
        
      });
    }
  },
  components:{
    
  },
  created(){
    this.$http.get("/index.php/index/service/cateGory")
      .then(res => {
        this.leftnav=res.data
        this.firstid = this.leftnav[0].id;

        console.log(this.firstid)
      })
      .catch(error => {
        
      });
      this.$http.get("/index.php/index/service/getInfo?ids="+this.firstid)
      .then(res => {
        this.nr = res.data
        console.log(res.data)
      })
      .catch(error => {
        
      });
  }
}
</script>

<style scoped lang="less">
.news{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
  .banner{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    img{
      width: 100%;
    }
  }
  
}
.big-box{
  width: 1200px;
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin: auto;
  .left-nav{
    margin-top: 30px;
    width: 244px;
    float: left;
    border: 1px solid #c7c7c7;
    .list{
      display: block;
      width: 100%;
      height: 54px;
      text-align: center;
      line-height: 54px;
      font-size: 16px;
      color: #212121;
      cursor: pointer;
    }
    .list-act{
      color: #fff;
      background: #50b748;
    }
    .router-link-active{
      color: #fff;
      background: #50b748;
    }
  }
  .right-box{
    width: 924px;
    height: auto;
    zoom: 1;
    float: right;
    margin-top: 30px;
  }
}
.edit-box{
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin-top: 30px;
  width: 100%;
  .p-head{
    font-size: 20px;
    color: #2e2e2e;
    text-align: center;
  }
  .cont-box{
    margin-top: 20px;
  }
  img{
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 100%;
  }
}
</style>
